<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>书籍列表</title>
    <h1>欢迎你进入图书管理系统</h1>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        form {
            margin-bottom: 20px;
        }
        input[type="text"] {
            padding: 5px;
            width: 200px;
        }
        input[type="submit"] {
            padding: 5px 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
        }
        th {
            background-color: #007BFF;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        a {
            text-decoration: none;
            color: #007BFF;
            margin-right: 10px;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<h2>书籍列表查询</h2>
<form action="BookServlet">
    <input type="text" name="bookName" placeholder="请输入书籍名称">
    <input type="submit" value="查询">
</form>
<h2>插入新书</h2>
<form action="InsertBookServlet" method="get">
    <label for="bookName">书名:</label>
    <input type="text" id="bookName" name="bookName" required><br><br>

    <label for="authorName">作者姓名:</label>
    <input type="text" id="authorName" name="authorName" required><br><br>

    <label for="authorNation">作者国籍:</label>
    <input type="text" id="authorNation" name="authorNation" required><br><br>

    <label for="bookYear">出版年份:</label>
    <input type="number" id="bookYear" name="bookYear" required><br><br>

    <input type="submit" value="插入">
</form>
<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>书名</th>
        <th>作者</th>
        <th>国家</th>
        <th>出版年份</th>
        <th>操作</th>
        <th>编辑</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${bookList}" var="book">
        <tr>
            <td>${book.book_id}</td>
            <td>${book.book_name}</td>
            <td>${book.authors.author_name}</td>
            <td>${book.authors.author_nation}</td>
            <td>${book.book_year}</td>
            <td>
            <a href="updateBook?id=${book.book_id}" class="edit-link">修改</a>
            <td><a href="deleteBook?id=${book.book_id}" class="delete-link">删除</a></td>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<script>
    document.querySelectorAll('.delete-link').forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            const bookId = this.getAttribute('data-book-id');
            if (confirm('确定要删除这本书吗？')) {
                // 发送删除请求到服务器
                fetch(`DeleteBookServlet?bookId=${bookId}`, { method: 'DELETE' })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert('删除成功！');
                            // 刷新页面或从 DOM 中移除该行
                            location.reload();
                        } else {
                            alert('删除失败！');
                        }
                    })
                    .catch(error => console.error('Error:', error));
            }
        });
    });
</script>

<script>
    document.querySelectorAll('.edit-link').forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            const bookId = this.getAttribute('data-book-id');
            // 发送编辑请求到服务器
            fetch(`EditBookServlet?bookId=${bookId}`, { method: 'GET' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('编辑成功！');
                    }
                })
        })
    })
</script>
</body>
</html>
